.wrapper {
  height: 100%;
  position: relative;
  border-radius: var(--mantine-radius-md);
  background-color: var(--mb-color-background-light);
  border: 1px solid transparent;
  transition:
    background-color 150ms,
    border-color 150ms;

  &:hover {
    background-color: color-mix(
      in srgb,
      var(--mb-color-background-inverse) 2%,
      var(--mb-color-background-light)
    );
  }

  &:not(:hover) .showOnHover:not(:focus-within) {
    /* Inclusively hidden so it can still be focused via keyboard navigation */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  &.selected {
    border-color: var(--mb-color-brand);
  }
}

.scrollContainer {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: auto;
  padding: 1.5rem 1rem;
  cursor: text;
  caret-color: auto;
}

/* Prevent dropCursor from displaying while dragging over SupportingText contents */
:global(.dragging) .scrollContainer {
  pointer-events: none;
}

.handle {
  cursor: grab;
  height: 1rem;
  position: absolute;
  top: 0;
  width: 100%;
  user-select: none; /* Needed to make this handle draggable in FF */

  &:focus-visible {
    outline: none !important;
  }

  &:active {
    cursor: grabbing;
  }
}

.placeholder {
  position: absolute;
  pointer-events: none;
  color: var(--mb-color-text-light);
}

.commentsButton[data-variant="default"]:not(:hover) {
  background-color: transparent;
}
